import {animate, animation, state, style, transition, trigger, useAnimation} from '@angular/animations';

export const transform3d = animation([
  style({transform: '{{translate3dIn}}'}),
  animate('.5s ease-in-out', style({transform: '{{translate3dOut}}'}))
]);

export const slideToRight = trigger('routeAnim', [
  state('void', style({position: 'fixed', width: '100%', height: '100%'})),
  state('*', style({position: 'fixed', width: '100%', height: '100%'})),
  // 进场动画
  transition(':enter', useAnimation(transform3d, {
    params: {
      translate3dIn: 'translate3d(-100%,0,0)',
      translate3dOut: 'translate3d(0,0,0)'
    }
  })),
  // 出场动画
  transition(':leave', useAnimation(transform3d, {
    params: {
      translate3dIn: 'translate3d(0,0,0)',
      translate3dOut: 'translate3d(100%,0,0)'
    }
  }))
]);

export const slideToTop = trigger('routeAnim', [
  state('void', style({position: 'fixed', width: '100%', height: '100%'})),
  state('*', style({position: 'fixed', width: '100%', height: '100%'})),
  // 进场动画
  transition(':enter', useAnimation(transform3d, {
    params: {
      translate3dIn: 'translate3d(0,-100%,0)',
      translate3dOut: 'translate3d(0,0,0)'
    }
  })),
  // 出场动画
  transition(':leave', useAnimation(transform3d, {
    params: {
      translate3dIn: 'translate3d(0,0,0)',
      translate3dOut: 'translate3d(0,100%,0)'
    }
  }))
]);

export const defaultRouteAnim = slideToRight;
